<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magic Animation</title>
    <link rel="stylesheet" href="css/magic.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
    <div class="top">
        <div class="basic">
            <div class="giteebox"><a href="https://gitee.com/liangxile/magic/tree/master"><i class="gitee"></i></a></div>
            <div class="box">
                <div class="rocket"></div>
            </div>
        </div> 
    </div>
   
    <div class="container">
        <div class="magicbox">
            <span class="text">MAGIC EFFECTS</span>
            <div class="mbtn">
                <span>MAGIC</span>
                <span>TWISTERINDOWN</span>
                <span>TWISTERINUP</span>
                <span>SWAPLEFT</span>
                <span>SWAPRIGHT</span>
                <span>SWAPBOTH</span>
            </div>
            
        </div>
        <div class="magicbox">
            <span class="text">BLING</span>
            <div class="mbtn">
                <span>PUFFIN</span>
                <span>PUFFOUT</span>
                <span>VANISHIN</span>
                <span>VANISHOUT</span>
            </div>
        </div>
        <div class="magicbox">
            <span class="text">STATIC EFFECTS</span>
            <div class="mbtn">
                <span>openDownLeft</span>
                <span>openDownRight</span>
                <span>openUpLeft</span>
                <span>openUpRight</span>
                <span>openDownLeftReturn</span>
                <span>openDownRightReturn</span>
                <span>openUpLeftReturn</span>
                <span>openUpRightReturn</span>
            </div>
        </div>
        <div class="magicbox">
            <span class="text">STATIC EFFECTS OUT</span>
            <div class="mbtn">
                <span>openDownLeftOut</span>
                <span>openDownRightOut</span>
                <span>openUpLeftOut</span>
                <span>openUpRightOut</span>
            </div>
        </div>
        <div class="magicbox">
            <span class="text">PERSPECTIVE</span>
            <div class="mbtn">
                <span>perspectiveDown</span>
                <span>perspectiveUp</span>
                <span>perspectiveLeft</span>
                <span>perspectiveRight</span>
                <span>perspectiveDownReturn</span>
                <span>perspectiveUpReturn</span>
                <span>perspectiveLeftReturn</span>
                <span>perspectiveRightReturn</span>
            </div>
        </div>
        <div class="magicbox">
            <span class="text">ROTATE</span>
            <div class="mbtn">
                <span>rotateDown</span>
                <span>rotateUp</span>
                <span>rotateLeft</span>
                <span>rotateRight</span>
                <span>rotate-in-center</span>
                <span>rotate-in-br</span>
                <span>rotate-in-tl</span>
                <span>rotate-in-diag</span>
                <span>rotate-in-top</span>
                <span>rotate-in-bottom</span>
                <span>rotate-in-hor</span>
                <span>rotate-in-tr</span>
                <span>rotate-in-bl</span>
                <span>rotate-in-ver</span>
                <span>rotate-in-right</span>
                <span>rotate-in-left</span>
                <span>rotate-in-diag-1</span>
                <span>rotate-in-2-cw</span>
                <span>rotate-in-2-bck-cw</span>
                <span>rotate-in-2-br-cw</span>
                <span>rotate-in-2-tl-cw</span>
                <span>rotate-in-2-ccw</span>
                <span>rotate-in-2-bck-ccw</span>
                <span>rotate-in-2-br-ccw</span>
                <span>rotate-in-2-tl-ccw</span>
                <span>rotate-in-2-fwd-cw</span>
                <span>rotate-in-2-tr-cw</span>
                <span>rotate-in-2-bl-cw</span>
                <span>rotate-in-2-fwd-ccw</span>
                <span>rotate-in-2-tr-ccw</span>
                <span>rotate-in-2-bl-ccw</span>
            </div>
        </div>
        <div class="magicbox">
            <span class="text">SLIDE</span>
            <div class="mbtn">
                <span>slideDown</span>
                <span>slideUp</span>
                <span>slideLeft</span>
                <span>slideRight</span>
                <span>slideDownReturn</span>
                <span>slideUpReturn</span>
                <span>slideLeftReturn</span>
                <span>slideRightReturn</span>
            </div>
        </div>
        <div class="magicbox">
            <span class="text">MATH</span>
            <div class="mbtn">
                <span>swashOut</span>
                <span>swashIn</span>
                <span>foolishIn</span>
                <span>holeOut</span>
            </div>
        </div>
        <div class="magicbox">
            <span class="text">TIN</span>
            <div class="mbtn">
                <span>tinRightOut</span>
                <span>tinLout</span>
                <span>tinUpOut</span>
                <span>tinDownOut</span>
                <span>tinRightIn</span>
                <span>tinLeftIn</span>
                <span>tinUpIn</span>
                <span>tinDownIn</span>
            </div>
        </div>
        <div class="magicbox">
            <span class="text">BOMB</span>
            <div class="mbtn">
                <span>bombRightOut</span>
                <span>bombLeftOut</span>
            </div>
        </div>
        <div class="magicbox">
            <span class="text">SCALEIN</span>
            <div class="mbtn">
                <span>scale-in-center</span>
                <span>scale-in-br</span>
                <span>scale-in-top</span>
                <span>scale-in-tr</span>
                <span>scale-in-right</span>
                <span>scale-in-bottom</span>
                <span>scale-in-bl</span>
                <span>scale-in-left</span>
                <span>scale-in-tl</span>
                <span>scale-in-hor-center</span>
                <span>scale-in-hor-left</span>
                <span>scale-in-hor-right</span>
                <span>scale-in-ver-center</span>
                <span>scale-in-ver-top</span>
                <span>scale-in-ver-bottom</span>
            </div>
        </div>
        <div class="magicbox">
            <span class="text">BOING</span>
            <div class="mbtn">
                <span>boingInUp</span>
                <span>boingOutDown</span>
            </div>
        </div>
        <div class="magicbox">
            <span class="text">ON THE SPACE</span>
            <div class="mbtn">
                <span>spaceOutUp</span>
                <span>spaceOutRight</span>
                <span>spaceOutDown</span>
                <span>spaceOutLeft</span>
                <span>spaceInUp</span>
                <span>spaceInRight</span>
                <span>spaceInDown</span>
                <span>spaceInLeft</span>
            </div>
        </div>
    </div>
</body>
<script type="module">
   import {Magic} from "./js/magic.js"
   let mbtn=document.querySelectorAll(".mbtn");
   let box=document.querySelector(".box");
   Magic.init(box,mbtn);

  
</script>
</html>